<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0 ,minimum-scale=1.0 ,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>任务名称</title>
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/iconfont.css"/>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <style>
        .content{}
        .content .title{display: -webkit-box;display: box;padding: 10px;position: relative;}
        .content .title .left{width: 60px;height: 60px;background-size: cover;background-position: center}
        .content .title .right{box-flex: 1;-webkit-box-flex: 1;margin-left: 10px;}
        .content .title .right .top{margin-top: 8px;display: -webkit-box;display: box;}
        .content .title .right .top .t-left{}
        .vip-name{color: #e60014;}
        .sex{color: #049cce;}
        .star{color: #fec015;}
        .content .title .right .top .t-right{box-flex: 1;-webkit-box-flex: 1;text-align: right;}
        .content .title .right .top .t-right span{color: #fff;padding: 3px;border-radius: 3px;font-size: 12px;font-weight: bold;}
        .content .title .right .top .t-right .service{background-color: #a0a0a0;}
        .content .title .right .top .t-right .ding{background-color: #049cce;}
        .content .title .right .bottom{font-size: 12px;margin-top: 10px;color: #666;}
        .content .table{}
        .content .table li{overflow: hidden;padding: 8px;line-height: 24px;position: relative;font-size: 14px;}
        .content .table li .left{float: left;width: 25%;color: #FFC10C;box-sizing: border-box;border-right: 1px solid #ededed;}
        .content .table li .right{float: right;width: 75%;color: #333;overflow: hidden;padding-left: 10px;}
        .content .table li .right .t-left{float: left;}
        .content .table li .right .t-right{float: right;}

        .content .detail{padding: 10px;}
        .content .detail .d-title{color: #FFC10C;font-size: 14px;margin-bottom: 10px;}
        .content .detail .words{line-height: 20px;}
        .content .detail .photo{margin-top: 10px;width: 100px;height: 100px;background-size: cover;background-position: center;}

        .content .person{padding: 10px;}
        .content .person .p-title{color: #FFC10C;font-size: 14px;margin-bottom: 10px;}
        .content .person ul{padding: 0 10px;}
        .content .person ul li{padding: 10px 0;overflow: hidden;position: relative;}
        .content .person ul li .left{float: left;width: 50px;height: 50px;background-size: cover;background-position: center;}
        .content .person ul li .center{float: left;margin-left: 10px;font-size: 14px;}
        .content .person ul li .right{float: right;margin-top: 26px;}
        .content .person ul li .right a{display: inline-block;font-size: 13px;line-height: 24px;padding: 0 10px;
            color: #fff;border-radius: 3px;}
        .content .person ul li .right .sign{background-color: #8fc320;}
        .content .person ul li .right .kick{background-color: #f59901;}




        .footer{height: 50px;}
        .footer-fixed{position: fixed;z-index: 999;left: 0;bottom: 0;width: 100%;height: 50px;display: -webkit-box;display: box;}
        .footer-fixed div{color: #fff;-webkit-box-flex: 1;box-flex: 1;line-height: 50px;font-size: 18px;text-align: center;}
        .footer-fixed .signing{background-color: #cacaca;}
        .footer-fixed .refund{background-color: #ffc10c;}
        .footer-fixed .refund a{color: #fff;}
    </style>
</head>
<body>
<script src="../js/overall_mask.js"></script>
<header class="header header2">
    <div class="header-fixed">
        <div class="left">
            <a href="javascript:window.history.back();">
                <i class="iconfont icon-arrowleft"></i>
            </a>
        </div>
        <div class="center">任务名称</div>
    </div>
</header>
<div class="content">
    <div class="title bottom-line">
        <div class="left" style="background-image: url('../img/pic_lessor.png')"></div>
        <div class="right">
            <div class="top">
                <div class="t-left">
                    <span class="vip-name"><i class="iconfont icon-vip"></i><b>小明</b></span>
                    <span class="sex"><i class="iconfont icon-women"></i></span>
                    <span class="star"><i class="iconfont icon-star2"></i></span>
                </div>
                <div class="t-right">
                    <span class="service">生活服务</span>
                    <!--<span class="ding">顶</span>-->
                </div>
            </div>
            <div class="bottom">任务编号：42454958593812</div>
        </div>
    </div>
    <ul class="table">
        <li class="bottom-line">
            <div class="left">价格</div>
            <div class="right">
                <div class="t-left">228</div>
                <div class="t-right">元/小时</div>
            </div>
        </li>
        <li class="bottom-line">
            <div class="left">开始时间</div>
            <div class="right">
                <div class="t-left">2016年06月05日 16:30</div>
            </div>
        </li>
        <li class="bottom-line">
            <div class="left">时长</div>
            <div class="right">
                <div class="t-left">3</div>
                <div class="t-right">小时</div>
            </div>
        </li>
        <li class="bottom-line">
            <div class="left">保证金</div>
            <div class="right">
                <div class="t-left">需要</div>
            </div>
        </li>
        <li class="bottom-line">
            <div class="left">性别要求</div>
            <div class="right">
                <div class="t-left">男</div>
            </div>
        </li>
        <li class="bottom-line">
            <div class="left">需求人数</div>
            <div class="right">
                <div class="t-left">3</div>
                <div class="t-right">人</div>
            </div>
        </li>
        <li class="bottom-line">
            <div class="left">地区</div>
            <div class="right">
                <div class="t-left">成都市高新区华府大道</div>
            </div>
        </li>
        <li class="bottom-line">
            <div class="left">付款方式</div>
            <div class="right">
                <div class="t-left">平台托管</div>
            </div>
        </li>
    </ul>
    <div class="detail">
        <p class="d-title">任务详情</p>
        <p class="words">任务详情任务详情任务详情任务详情任务详情任务详情任务详情任务详情任务详情</p>
        <div class="photo" style="background-image: url('../img/bg.png')"></div>
    </div>
    <div class="person">
        <p class="p-title">已投标人（<span>5</span>）</p>
        <ul>
            <li class="bottom-line">
                <div class="left" style="background-image: url('../img/pic_lessor.png')"></div>
                <div class="center">
                    <span class="vip-name"><i class="iconfont icon-vip"></i><b>小明</b></span>
                    <span class="sex"><i class="iconfont icon-women"></i></span>
                    <span class="star"><i class="iconfont icon-star2"></i></span>
                </div>
                <div class="right">
                    <a class="btn sign" href="javascript:void(0);">已签约</a>
                </div>
            </li>
            <li class="bottom-line">
                <div class="left" style="background-image: url('../img/pic_lessor.png')"></div>
                <div class="center">
                    <span class="name">小明</span>
                    <span class="sex"><i class="iconfont icon-women"></i></span>
                    <span class="star"><i class="iconfont icon-star2"></i></span>
                </div>
                <div class="right">
                    <a class="btn sign" href="javascript:void(0);">签约</a>
                    <a class="btn kick" href="javascript:void(0);">踢出</a>
                </div>
            </li>
        </ul>
    </div>
</div>
<footer class="footer">
    <div class="footer-fixed">
        <div class="signing">签约中...</div>
        <div class="refund">
            <a href="../html/refund.html">投诉退款</a>
        </div>
    </div>
</footer>
</body>
<script>

</script>
</html>